import QtQuick 1.0
import "models"
import "templates"
//import "js/main.js" as MainManager

Item {
    id: productsListContainer

    property alias yFormAdd: addProductForm.y
    property int listID
    property alias trigerActive: activeTimer.running

    property alias shoppingItemListModel: shoppingItemListModel

    Timer {
        id: activeTimer
        interval: 500; running: false; repeat: false; triggeredOnStart: false;
        onTriggered: {
            if(listID == 0)
                shoppingItemListModel.clear();
            else
                mainContainer.getManager().generateItemsModel(listID, shoppingItemListModel)
        }
    }

    Component {
         id: productsSection

         ProductItem {
            id: productItemDelegate

            checkState: productState
            name: productName
            //price: productPrice
            //currency: productCurrency
            quantity: productQuantity
            mu: productMU
            itemId: productId
            itemIndex: productIndex
            listID: productListId

            height: 60; width: 360
            scale: 1

            MouseArea {
                id: checkMouseArea
                width: 60; height: 60
                anchors.left: parent.left
                anchors.top: parent.top

                onReleased: {
                    if(productItemDelegate.checkState == '0') {
                        productItemDelegate.state = '1'
                        mainContainer.getManager().checkItem(1, productItemDelegate.itemId);
                    }
                    else {
                        productItemDelegate.state = '0'
                        mainContainer.getManager().checkItem(0, productItemDelegate.itemId);
                    }
                }
            }

            MouseArea {
                id: deleteMouseArea
                width: 60; height: 60
                anchors.right: parent.right
                anchors.top: parent.top

                onReleased: {
                    productItemDelegate.state = "deleteProductSate"
                    //start timer
                    deleteProductTimer.running = true
                }
            }

            Timer {
                id: deleteProductTimer
                interval: 900; running: false; repeat: false; triggeredOnStart: false;
                onTriggered: {
                    shoppingItemListModel.remove(itemIndex)
                    mainContainer.getManager().deleteItemFromList(itemId, shoppingItemListModel, listID)
                    //shoppingListModel.sync();
                }
            }

            //Delete state, used as a triger for delete item animation
            states: State {
                name: "deleteProductSate"
            }

            //transition for delete item
            transitions: Transition {
                from: "*"; to: "deleteProductSate"
                SequentialAnimation {
                    PropertyAction { target: productItemDelegate; property: "ListView.delayRemove"; value: true }
                    NumberAnimation { target: productItemDelegate; property: "scale"; to: 0.6; duration: 400; easing.type: Easing.OutElastic }
                    NumberAnimation { target: productItemDelegate; property: "x"; to: 800; duration: 400; easing.type: Easing.InBack }
                    PropertyAction { target: productItemDelegate; property: "ListView.delayRemove"; value: false }
                }
            }

        }
    }

    ListModel {
        id: shoppingItemListModel
    }

    ListView {
        id: shoppingLists
        height: parent.height; width: parent.width
        model: shoppingItemListModel
        delegate: productsSection

        states: [
            State {
                name: "ShowBars"
                when: shoppingLists.movingVertically || shoppingLists.movingHorizontally
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
                //PropertyChanges { target: horizontalScrollBar; opacity: 1 }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { properties: "opacity"; duration: 500 }
            },
            Transition {
                NumberAnimation { property: "x"; duration: 500 }
            }
        ]
    }

    //add shopping list form
    Rectangle {
        id: addProductForm
        anchors.left: parent.left;
        y: 640
        width: parent.width; height: 178;
        color: "#80000000"

        Rectangle {
            id: topBorderLine
            height: 3
            width: parent.width
            anchors.top: parent.top
            anchors.left: parent.left
            color: "#b6d051"
        }

        InputText {
            id: productNameInput
            inputWidth: 340
            inputPlaceholder: "Product name"

            anchors {
                left: parent.left; leftMargin: 10
                top: parent.top; topMargin: 10
            }
        }

        Row {
            id: addProductFormAmmountContainer
            spacing: 10
            anchors {
                left: parent.left; leftMargin: 10
            }
            y: 66

            InputText {
                id: productAmmountInput
                inputWidth: 100
                inputPlaceholder: "#"

                anchors {
                    left: parent.left; leftMargin: 10
                    top: parent.top; topMargin: 10
                }
            }
        }

        Row {
            id: addProductFormButtonConainer
            spacing: 10
            anchors {
                right: parent.left; rightMargin: 10
            }
            y: 116

            Button {
                buttonText: "Add"
                buttonWidth: 80

                onActivated: {
                    mainContainer.getManager().setList(listNameInput.inputTextValue, shoppingListModel);
                    footerContainer.state = "active"
                    listNameInput.resetState = "resetInput";
                }
            }

            Button {
                buttonText: "Cancel"
                buttonWidth: 80

                onActivated: {
                    footerContainer.state = "active"
                    listNameInput.resetState = "resetInput";
                }
            }
        }

        Behavior on y {
            PropertyAnimation { properties: "y"; easing.type: Easing.Linear }
        }
    }

    ScrollBar {
        id: verticalScrollBar
        width: 6; height: shoppingLists.height-6
        anchors.right: parent.right
        anchors.top: parent.top
        opacity: 0
        orientation: Qt.Vertical
        position: shoppingLists.visibleArea.yPosition
        pageSize: shoppingLists.visibleArea.heightRatio
    }
}
